{% extends 'base.html' %}
{% load humanize %}
{% block page-content %}
{% include 'nav_cat_bar.html' %}

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>选择服务器</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">未启用 1</a>
                            </li>
                            <li><a href="#">未启用 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <div class="row">
                        {% if log %}
                        <div class="alert alert-success text-center">{{ log }}</div>
                        {% endif %}
                        <div class="col-sm-5 m-b-xs" >
                        {% for k,v in pro_area_info.items %}
                            <div class="btn-group">
                              <button type="button" class="btn btn-primary">{{k}}</button>
                              <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-primary dropdown-toggle"><span class="caret"></span></button>
                              <ul class="dropdown-menu dropdown-menu-right">
                                {% for area_name in v %}
                                  <li><a href="?project={{k}}&area={{area_name}}">{{area_name}}</a></li>
                                  <li class="divider"></li>
                                {% endfor %}
                              </ul>
                            </div>
                        {% endfor %}

                        </div>

                    </div>

                    <form id="contents_form" name="contents_form" onsubmit="return validate_form(this)">
                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                                <th class="text-center"></th>
                                <th class="text-center">项目</th>
                                <th class="text-center">地区</th>
                                <th class="text-center">平台</th>
                                <th class="text-center">IP</th>
                                <th class="text-center">系统类型</th>
                                <th class="text-center">用途</th>
                                <th class="text-center">备注</th>
                            </thead>
                            <tbody>
                                {% for num in menu %}
                                    <tr class="text-center">
                                        <td><input type="checkbox" data-toggle="checkbox" name="subcheck" value='{{num.project.mini_name}}+{{num.area.area_name}}+{{num.platform.mini_name}}+{{num.p_ip}}+{{ num.commit }}'></td>
                                        <td>{{num.project.mini_name}}</td>
                                        <td>{{num.area.area_name}}</td>
                                        <td>{{num.platform.mini_name}}</td>
                                        <td>{{num.p_ip}}</td>
                                        <td>{{num.os_type}}</td>
                                        <td>{% for use in num.use.all %} {{use}}{% endfor %}</td>
                                        <td>{{num.commit}}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                            </table>
                            <input id="checkall" type="checkbox" class="i-checks" name="checkall" value="checkall" data-editable='false' onclick="check_all('contents_form')">全选/全不选

                        </form>
                        <br>
                        <button type="submit" class="btn btn-primary dim"  form="contents_form" formmethod="post" formaction="{% url 'exec_script' %}?project={{project}}&area={{area_name}}">确认选择</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.responsive.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.tableTools.min.js"></script>

<link href="/static/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<link href="/static/css/plugins/dataTables/dataTables.responsive.css" rel="stylesheet">
<link href="/static/css/plugins/dataTables/dataTables.tableTools.min.css" rel="stylesheet">

<script type="text/javascript">
  function server_choice(){
        var opendata=new Array();
        var show=document.getElementsByName('subcheck');

        for(var i=0;i<show.length;i++){
            if(show[i].checked==true){
            opendata[i]=show[i].value+'<br>';
        }
    }
        for(var i=0;i<opendata.length;i++){
                if(opendata[i] == "" || typeof(opendata[i]) == "undefined")
                {
                        opendata.splice(i,1);
                        i = i-1;
                }
        }
        document.getElementById("open_list").innerHTML=opendata;
}
</script>

<script type="text/javascript">
    $(document).ready(function() {
            $('.dataTables-example').dataTable({
                responsive: true,
                "dom": 'T<"clear">lfrtip',
                "iDisplayLength":50,
                "tableTools": {
                    "aButtons":["copy","xls",'print'],
                    "sSwfPath": "/static/js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
                }
            });
        });
</script>

{% endblock %}